<template>
  <view class="recommend">
    <swiper class="swiper" :indicator-dots="true" indicator-active-color="rgba(214, 142, 68, 1)" :circular="true">
      <swiper-item>
        <up-grid col="3">
          <up-grid-item :customStyle="{ padding: '12rpx' }" v-for="(item, index) in oneList" :index="index" :key="index">
            <image class="grid-image" :src="item.url"></image>
            <text class="grid-text">{{ item.title }}</text>
            <text class="grid-money">￥{{ item.price }}</text>
          </up-grid-item>
        </up-grid>
      </swiper-item>
      <swiper-item>
        <up-grid col="3">
          <up-grid-item :customStyle="{ padding: '12rpx' }" v-for="(record, index) in twoList" :index="index"
            :key="index">
            <image class="grid-image" :src="record.url"></image>
            <text class="grid-text">{{ record.title }}</text>
            <text class="grid-money">￥{{ record.price }}</text>
          </up-grid-item>
        </up-grid>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
const props = defineProps({
  recommendList: {
    type: Array,
    default: () => {
      return [];
    }
  }
});

const oneList = ref([]);
const twoList = ref([]);

onMounted(() => {
  oneList.value = props.recommendList.slice(0, 6);
  twoList.value = props.recommendList.slice(6, 10);
});
</script>

<style lang="scss" scoped>
.recommend {
  .swiper {
    height: 720rpx;
  }

  .grid-image {
    width: 190rpx;
    height: 190rpx;
  }

  .grid-text {
    margin-top: 8rpx;
    font-size: 26rpx;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .grid-money {
    margin-top: 8rpx;
    font-size: 26rpx;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    color: rgba(214, 142, 68, 1);
  }
}
</style>
